<template>
  <view class="content">
    <image
      class="bg"
      :src="EnumBG.HP"
      mode="widthFix"
    ></image>

    <image
      class="h-button-bg"  
      src="@/static/button/dy-bg2.png"
      mode="widthFix"
    ></image>

    <view @click="changeUnfoldStatus">
    <image
      class="h-button"  
      src="@/static/button/h-button.png"
      mode="widthFix"
    ></image>
    </view>
    <view   class="info-list">
        <view class="info" :class="showIndex === index ? 'show-info' :'show-info-off'" v-for="(item,index) in infos" :key="item">
            {{item}}
        </view>
     </view>
     <view class="user-input" :style="{ 'background-image': 'url(' + EnumBG.BU3 + ')' }">
        <input v-model="userInput"   placeholder="请输入您的姓氏，如：龙" />
     </view>

     <view @click="toGet"  :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }" class="user-commit" 
       :class=" sizeStatus ? 'commit-big':'commit-samll'"  >
        立即查看
     </view>
  </view>
  <Roast />
  <Recommend  :top='95'/>
  <ToDY />
  <LandscapeModel v-model:show="show" :sonFun="sonFun"/>
</template>

<script setup lang="ts">
import { filtion,homophony } from "@/utils/ab";
import { EnumBG,filtions } from "@/utils/content";
import Roast from "@/components/Roast/Roast.vue";
import ToDY from "@/components/ToDY/ToDY.vue";
import Recommend from "@/components/Recommend/Recommend.vue";
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import dyUserPlayingService from "@/api/dyUserPlayingService";
const sizeStatus = ref(false)
const show = ref(false)
const unfold = ref(false)
const userInput = ref("")
const showIndex = ref(0)
const infos = ref([
    "宁太美",
    "多看一眼就爆炸",
    "梁习两年半",
    "爱坤",
])
const changeUnfoldStatus = () => {
    unfold.value = !unfold.value
}


/**
 * 获取结果
 */
const toGet = async ()=>{

  uni.showLoading({
        title: "加载中",
        icon: "none",
  });
  const {result}  = await dyUserPlayingService.sensitiveWord({word:userInput.value})
  if(result){
    uni.hideLoading()
    uni.showToast({
        title: '存在敏感词,请重新填写',
        duration: 2000,
        icon:"none"
    });
    return
  }
  uni.hideLoading()
  if(!userInput.value){
    uni.showToast({
        title: '请输入姓氏',
        duration: 2000,
        icon:"none"
    }); 
    return  
  }
  show.value = true
  // uni.navigateTo({
  //       url:'/pages/homophonic/getHomophonic'    
  // }) 
}

const sonFun =async ()=>{
  const text = await homophony(userInput.value)
        uni.hideLoading();
        uni.navigateTo({
            url:`/subPackages_play/homophonic/getHomophonic?text=${text}`    
      }) 
}
const startTimer = () => {
  setInterval(() => {
      sizeStatus.value =  !sizeStatus.value
  }, 1000); // 每秒执行一次

  setInterval(() => {
      showIndex.value = showIndex.value > infos.value.length - 1 ? 0 :   showIndex.value  + 1
  }, 500); // 每秒执行一次
};
onMounted(()=>{
    startTimer();
})

</script>

<style lang="scss" scoped>
.content {
  .bg{
    width: 100%;
    z-index: -1;
    height: 200rpx;
  }
  .h-button-bg{
    top: 30.5%;
    width: 65%;
    left: 2%;
  }
  .h-button{
    position: absolute;
    z-index: 99;
    top: 32%;
    width: 51.5%;
    left: 9%;

  }
  .info-list {
        position: absolute;
        z-index: 99;
        margin: 20rpx 0;
        top: 40%;
        width: 51.4%;
        left: 9%;
        background: rgb(10,42,81);
        transition: all 0.4s;
        overflow: hidden;
        height: 368rpx;
        border-radius: 0 0 30rpx 30rpx;
        .info{
            color: white;
            font-size: 45rpx;
            padding: 15rpx 20rpx;
        }
        .show-info{
          color: rgba(151, 151, 151, 0.3);  
          transition: all .5s;
        }
        .show-info-off{
          color: white;
          transition: all 4s;
        }
        .info:hover{
            background: rgb(40,184,255);
        }
    }
    .user-input{
        position: absolute;
        z-index: 99;
        top: 70%;
        left: 9%;
        height: 10%;
        width: 614rpx;
        color: white;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        input{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 40rpx;
        }
    }
    .user-commit{
        position: absolute;
        z-index: 99;
        top: 85%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        left: 29%;
        height: 7.5%;
        width: 304rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }
    .commit-big{

        top: 83%;
        left: 27%;
        height: 9.5%;
        width: 344rpx;
        transition: all 1s;
    }
    .commit-samll{
       
        top: 87%;
        left: 29%;
        height: 7.5%;
        width: 304rpx;
        transition: all 1s;
       
    }
}
page {
  width: 100%;
  height: 100%;
}
</style>
